<!--
 * @Author: zjj
 * @Date: 2019-10-07 13:14:09
 * @LastEditors: zjj
 * @LastEditTime: 2019-11-22 15:24:57
 -->
<!--  -->
<template>
  <div class="tab-wrapper flex color-gray">
    <template v-for="(item,index) in tabs">
      <div
        class="tab-item flex justify-center aligin-center"
        :key="index"
        :style="[{color:index==tabIndex?'#333':'' },{fontWeight:index==tabIndex?'bold':'500' }]"
        @click="tabChange(index)"
      >{{item}}</div>
    </template>  
    <div
      v-if="tabs.length"
      class="tab-line flex justify-center"
      :style="[{transform:'translateX('+tabIndex*100+'%)'}]"
    >
      <span class="line"></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: () => {
        return [];
      },
      required: true
    },
    tabIndex: {
      type: Number,
      default: () => {
        return 0;
      },
      required: true
    },
    activeColor: {
      type: String,
      default: () => {
        return "#ff9000";
      }
    }
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    tabChange(index) {
      this.$emit("tabChange", index);
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类

.tab-wrapper {
  position: relative;
  width: 100%;
  height: 44px;
  .tab-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 64px;
    transition: all 0.3s ease;
  }
  .line {
    width: 18px;
    height: 3px;
    border-radius: 1px;
    background: #ea373f;
  }
  .tab-item {
    height: 100%;
    width: 64px;
    font-size: 13px;
  }
  .item-width{
    min-width: 62px;
  }
}
</style>